<!DOCTYPE html>  
  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>  
  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 100%;height: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="cityMap.js"></script>
    <script type="text/javascript" src="shanxi_data.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        require.config({  
            paths: {  
                echarts: 'http://echarts.baidu.com/build/dist'  
            }  
        });  
        var convertData = function (data) {
            var ds = [];
            for(var i = 0;i<data.length;i++){
                ds[i] = {};
                ds[i].name = data[i].name;
                ds[i].value = data[i].f();
            }
            return ds;
        };
        // 使用  
        require([
                'echarts',  
                'echarts/chart/map'
        ], function(echarts) {
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '2013年创新创业机构的分布',
                    x:'center',
                    y:'60',
                    textStyle:{
                        color:'#FFF',
                        align: 'center',
                        fontSize: 22
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    show:false,
                    orient: 'vertical',
                    x: 'left',
                    data: ['科技人才']
                },
                backgroundColor: '#0A0F23',
                dataRange: {
                    x: '10%',
                    y: '65%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    splitList: [{
                        start: 100000
                    },{
                        start: 75000,
                        end: 100000
                    }, {
                        start: 50000,
                        end: 75000
                    }, {
                        start: 50000,
                        end: 25000
                    }, {
                        end: 25000
                    }],
                    color: ['#264c82']
                },
                series: [{
                    name: '科技人才',
                    type: 'map',
                    mapType: '陕西',
                    mapLocation: {
                        y:'10%',
                        x:'35%'
                    },
                    selectedMode: 'single',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                            color: '#fff',
                                            fontSize: 16
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                            textStyle: {
                                        color: '#fff',
                                        fontSize: 16
                            }
                          }
                        }
                    },
                    data: convertData(data)
                }]
            };
            var i = 1;
            setInterval(function(){
                if(option){
                    var year = (i%5+2013)+"年创新创业机构的分布";
                    option.title.text = year;
                    myChart.clear();
                    option.series[0] = {
                    name: '科技人才',
                    type: 'map',
                    mapType: '陕西',
                        mapLocation: {
                            y:'10%',
                            x:'35%'
                        },
                    selectedMode: 'single',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 16
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: convertData(data)
                };
                myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
                i++;
                }
            }, 2000);
            myChart.setOption(option);
            }
        );  
    </script>  
</body>